<template>
	<div class="bargainList" v-if="item">
		<img :src="item.pic" alt="">
		<div>
			<p class="title">{{ item.name }}</p>
			<p class="desc">{{ item.characteristic }}</p>
			<ol>
				<li>
					<span class="minPrice">￥{{ item.minPrice }}</span>
					<span>低价</span>
				</li>
				<li>
					<span class="gray mb">￥{{ item.originalPrice }}</span>
					<span class="gray">原价</span>
				</li>
				<li>
					<span class="gray mb">{{ item.stores }}件</span>
					<span class="gray">限量</span>
				</li>
			</ol>
		</div>
	</div>
</template>

<script>
export default {
	name: 'bargainList',
	props: {
		item: {}
	},
	data() {
		return {};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {

	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.bargainList {
  display: flex;
  box-sizing: border-box;
  padding: 0.375rem;

  img {
    width: 6.75rem;
  }

  div {
    margin-left: 0.75rem;

    .title {
      font-size: 0.875rem;
      color: #333333;
    }

    .desc {
      font-size: 0.75rem;
      color: #b2b2b2;
      margin-top: 0.8rem;
    }

    ol {
      height: 5.65rem;
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        height: 2.25rem;
        margin-top: 3.4rem;
        font-size: 0.77451875rem;
        flex-direction: column;
        text-align: center;

        .gray {
          color: #b2b2b2;
        }

        .minPrice {
          font-weight: 700;
          color: #d00000;
          margin-bottom: 0.375rem;
        }

        .mb {
          margin-bottom: 0.375rem;
        }
      }
    }
  }
}
</style>